<template>
  <div class="register_dev_wrap">
    <div class="left_box">
      <!-- 注册设备卡片 -->
      <a-card :title="`注册设备`" class="reg_dev_card" :bordered="false" hoverable style="height: 99%">
        <div class="register_form_box">
          <div class="register_form_item">
            <span class="label">设备类型</span>
            <a-select
              :default-value="''"
              allow-clear
              v-model="selectDevTypeId"
              :style="{ width: '220px' }"
              placeholder="请选择设备类型"
              allow-search
            >
              <a-option v-for="dtl in devTypeList" :value="dtl.devTypeId" :key="dtl.id">{{ dtl.devTypeName }}</a-option>
            </a-select>
          </div>
          <div class="register_form_item">
            <span class="label">后缀编号</span>
            <a-input v-model="devNo" style="width: 220px" placeholder="请输入设备后缀编号" />
            <a-button type="primary" style="margin-left: 10px" @click="generateRandomNo">
              <icon-sync style="margin-right: 6px" />
              随机生成
            </a-button>
          </div>
          <div class="register_form_item">
            <span class="label">备注</span>
            <a-textarea
              placeholder="请输入设备备注"
              v-model="devDesc"
              style="margin-left: 8px; position: absolute; width: 220px; left: 17.5%; height: 80px"
              allow-clear
            />
          </div>
        </div>
        <div class="dev_gid_box" v-if="selectDevTypeId != '' && devNo != ''">
          <!-- <span class="label">设备编码</span> -->
          <span class="dev_gid_text">{{ devGIdComp }}</span>
          <a-button type="primary" size="small" style="margin-left: 20px" @click="copyDevGId">
            <icon-copy style="margin-right: 6px" />
            复制
          </a-button>
        </div>

        <div class="ac_btn_box">
          <a-button type="primary" size="large" class="btn_item reg" status="success" @click="regDevClick">
            <icon-thunderbolt size="20" style="margin-right: 6px" />
            注册设备
          </a-button>
          <!-- <a-button type="primary" size="large" class="btn_item gtag" status="warning" @click="scTagClick">
            <icon-printer size="20" style="margin-right: 6px" />
            <icon-font type="icon-biaoqianzhi" style="color: white" :size="32" />
            生成标签
          </a-button> -->
        </div>
      </a-card>
    </div>
    <div class="right_box" v-if="isShowDevTagBox">
      <a-card
        v-if="isShowDevTagBox"
        :title="`标签预览`"
        class="tag_preview_card"
        :bordered="false"
        hoverable
        style="height: 99%"
      >
        <div class="tag_pv_box">
          <div class="preview_box">
            <div v-contextmenu:contextmenu>
              <!-- <div id="preview_code_box" class="preview_code_box">
                <div class="header_box">
                  <img src="./images/logo.png" />
                </div>
                <div class="content_box">
                  <qrcode-vue
                    id="dev_qrcode"
                    :value="`https://d.lohand.com:10001/weixin/miniprogram?devGId=${devGIdComp}`"
                    style="background-color: white"
                    :size="74"
                    level="H"
                  ></qrcode-vue>
                  <span class="dev_gid" v-if="isShowDevTagBox">{{ devGIdComp }}</span>
                </div>
                <div class="footer_box">
                  <span class="company_name">浙江陆恒环境科技有限公司</span>
                </div>
              </div> -->
              <div id="preview_code_box" class="preview_code_box">
                <div class="main">
                  <div class="left">
                    <div class="top">
                      <img class="logo_img" src="./images/logo.png" />
                    </div>
                    <div class="bottom">
                      <div class="desc_box">
                        <span> 【微信扫一扫】 </span>
                        <span>开启恒蓝云</span>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="code_box">
                      <qrcode-vue
                        id="dev_qrcode"
                        :value="`https://d.lohand.com:10001/weixin/miniprogram?devGId=${devGIdComp}`"
                        style="background-color: white"
                        :size="110"
                        level="H"
                      ></qrcode-vue>
                      <!-- 左上角角标 -->
                      <img class="qr_jb_img top_left_jb_img" src="./images/qr_jb.svg" />
                      <img class="qr_jb_img top_right_jb_img" src="./images/qr_jb.svg" />
                      <img class="qr_jb_img bottom_left_jb_img" src="./images/qr_jb.svg" />
                      <img class="qr_jb_img bottom_right_jb_img" src="./images/qr_jb.svg" />
                    </div>
                    <div class="dev_gid_box">
                      <span class="dev_gid_text">{{ devGIdComp }}</span>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <span class="company">浙江陆恒环境科技有限公司</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 60px; line-height: 60px" class="btn_box">
          <a-button type="primary" @click="downDevQrCodeImgClick">下载图片</a-button>
          <a-button type="primary" style="margin-left: 10px; position: relative; top: 4px" @click="printQrCodeClick">
            <icon-printer size="20" style="margin-right: 6px" />
            打印标签
          </a-button>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from 'vue'
import './index.scss'
import '../equipment/css/tag-1.scss'
export default defineComponent({
  name: 'ActivationDev'
})
</script>
<script lang="ts" setup>
import { getDevTypeListApi } from '@/apis/equipment/index'
import { Message } from '@arco-design/web-vue'
import { Icon } from '@arco-design/web-vue'
import { mgAddProDeviceApi } from '@/apis/registerDev/index'
import { useUserStore } from '@/store'
import QrcodeVue from 'qrcode.vue'
import domToImage from 'dom-to-image'
import { downloadFileByBase64 } from '@/utils/base64Down.js'
import printJS from 'print-js'

const userStore = useUserStore()

const IconFont = Icon.addFromIconFontCn({
  src: 'https://at.alicdn.com/t/c/font_4162228_s00h6ticeyi.js?spm=a313x.manage_type_myprojects.i1.10.78de3a81iR1zfW&file=font_4162228_s00h6ticeyi.js'
})

// 打印二维码点击事件
const printQrCodeClick = () => {
  domToImage.toPng(document.getElementById('preview_code_box')).then((url: any) => {
    console.log(url)
    printJS(url, 'image')
    // downloadFileByBase64(url, currentDevQrCodeDevGId.value)
  })
}

// 标签二维码内容
const tagQrCodeContent = ref('')

// 计算标签二维码内容的计算函数
const compTagQrCodeContentFunc = () => {
  return ``
}

// 显示标签栏的标识
const isShowDevTagBox = ref(false)

// 选择的设备id
const selectDevTypeId = ref('')

// 设备后缀编号
const devNo = ref('')

// 设备备注
const devDesc = ref('')

// 注册字段验证函数
const regRedVFunc = () => {
  let flag = true

  // 判断设备类型必选
  if (selectDevTypeId.value != '' && selectDevTypeId.value != null && selectDevTypeId.value != undefined) {
    flag = true
  } else {
    flag = false
    Message.warning('请选择设备类型')
    return flag
  }

  // 判断后缀编号必填
  if (devNo.value != '' && devNo.value != null && devNo.value != undefined) {
    flag = true
  } else {
    flag = false
    Message.warning('请输入设备后缀编号')
    return flag
  }

  return flag
}

// 注册设备点击事件
const regDevClick = async () => {
  if (regRedVFunc()) {
    // 获取当前用户的userId
    // isShowDevTagBox.value = true
    let userId = localStorage.getItem('userId')
    await mgAddProDeviceApi({
      devGId: devGIdComp.value,
      operateUser: userId,
      devDesc: devDesc.value
    })
      .then((res) => {
        console.log('注册设备成功：', res)
        //
        if (res.result == 'success') {
          Message.success('注册成功,可在右侧打印标签')
          isShowDevTagBox.value = true
        } else if (res.result == 'error') {
          Message.error(res.msg)
        }
      })
      .catch(() => {
        Message.error('注册失败')
      })
  }
}

// 复制设备编码
const copyDevGId = () => {
  navigator.clipboard.writeText(devGIdComp.value)
  Message.success('复制成功')
}

// 设备编号计算属性
const devGIdComp = computed(() => {
  let devTypeName = devTypeList.value.filter((item) => {
    return item.devTypeId == selectDevTypeId.value
  })[0].devTypeName

  console.log(devTypeName)

  return `${devTypeName}_${devNo.value}`
})

// 查询设备类型列表的函数
const getDevTypeListFunc = async () => {
  await getDevTypeListApi().then((res) => {
    console.log('设备类型列表', res.data)
    devTypeList.value = res.data
  })
}

// 设备类型列表
const devTypeList = ref([])

// 生成随机编码
function generateRandomNo() {
  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  let stringLength = 8
  let randomString = ''

  for (let i = 0; i < stringLength; i++) {
    let randomIndex = Math.floor(Math.random() * chars.length)
    randomString += chars.charAt(randomIndex)
  }

  devNo.value = randomString
}

// init
onMounted(() => {
  getDevTypeListFunc()
})
</script>

<style lang="scss" scoped>
:deep(.tag_preview_card) {
  .arco-card-body {
    height: 67%;
  }
}
.tag_pv_box {
  padding: 120px 0px 0px 0px;
  position: relative;
  background-color: rgb(216, 215, 215);
  height: 100%;
}
.preview_box {
  /* width: 100%; */
  width: 310px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid rgba(134, 144, 155, 0.5);
  border-radius: 6px;
  // transform: scale(1.5);
}

.title_text {
  padding-left: 80px;
  margin-bottom: 20px;
  letter-spacing: 5px;
  font-size: 20px;
  font-weight: bold;
}

// .preview_code_box {
//   background-color: white;
//   width: 227px;
//   height: 147px;
//   display: flex;
//   flex-direction: column;
//   padding: 4px;
//   box-sizing: border-box;
//   border-radius: 10px;

//   .header_box {
//     margin-bottom: 6px;

//     img {
//       position: relative;
//       left: 8px;
//       top: 4px;
//       width: 54px;
//       height: 18px;
//     }
//   }
//   .content_box {
//     display: flex;
//     flex-direction: column;
//     text-align: center;
//     position: relative;
//     margin-bottom: 4px;

//     #dev_qrcode {
//       position: relative;
//       top: -4px;
//       left: 51%;
//       transform: translateX(-50%);
//     }

//     .dev_gid {
//       font-size: 13px;
//       font-weight: bold;
//       position: relative;
//       // top: 3px;
//     }
//   }
//   .footer_box {
//     text-align: center;

//     .company_name {
//       font-size: 14px;
//       letter-spacing: 2px;
//       font-weight: bold;
//       position: relative;
//       top: -1px;
//       left: 2px;
//     }
//   }
// }

.btn_box {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
</style>
